<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      *{padding: 0; margin: 0;}
      .wrap{
        width: 800px;
        margin: 20px auto;
      }
      h2{
        text-align: center;
        line-height: 2;
        padding: 20px 0;
        color: #333;
      }
      .rank{
        list-style: none;
        counter-reset: index;
      }
      .rank__item{
        overflow: hidden;
        padding: 10px 10px 10px 40px;
        display: flex;
        background: #eee;
        margin: 0 0 1px;
        position: relative;
      }
      .rank__item::before{
        position: absolute;
        content: counters(index, '-') '';
        counter-increment: index;
        color: #000;
        font-size: 24px;
        left: 10px;
        height: 30px;
        line-height: 30px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .rank__detail{
        overflow: hidden;
        flex: 1;
        width: 50%;
      }
      .rank__name{
        font-size: 16px;
        line-height: 2;
      }
      .rank__envs{
        overflow: hidden;
      }
      .rank__env-item{
        float: left;
        width: 60px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: rgb(52, 163, 52);
        margin-right: 5px;
      }
      .rank__env-item a{
        display: block;
        color: #fff;
        text-decoration: none;
      }
      .rank__avg-score{
        width: 100px;
        height: 100%;
        font-size: 18px;
        text-align: right;
        align-content: center;
        align-self: center;
        color: darkgreen;
      }
    </style>
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="wrap">
      <h2>2017 算法马拉松 - 排行榜</h2>
      <div class="rank" id="rank">
      </div>
    </div>
    <script src="./dist/bundle-competition.js"></script>
  </body>
</html>